<template>
  <!-- @mousedown="startDrag($event)"
    @mouseup="endDrag($event)"
    @touchstart="onTouchStart"  
    @touchmove="onTouchMove"  
     @touchend="onTouchEnd" -->

  <div
    v-if="store.styleInfo?.id"
    @mousewheel="pageWheel"
    @touchstart="videoPlay"
    id="home-poster-id"
    class="home-parennt"
    :class="{ bannerShow: store.bannerShow }"
  >
    <div class="home">
      <homeVideo v-if="templateId == 575130496733253" />
      <div
        class="logo-box"
        :style="store.styleInfo.logo && { background: 'transparent' }"
        :class="{ 'log-box-loop': route.meta.loopType }"
      >
        <t-upload
          v-if="!route.meta.loopType"
          ref="uploadRef3"
          :before-upload="beforeUpload"
          theme="custom"
          accept=".png,.jpg,.jpeg"
          :auto-upload="true"
          :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
          @fail="handleFail"
        >
          <div class="upload-item-img">
            <img :src="urls + store.styleInfo.logo" alt="" v-if="store.styleInfo.logo" />
            <span v-else :style="{ color: NullBg.btmColor }">请上传LOGO图片</span>
          </div>
        </t-upload>
        <div class="upload-item-img upload-item-img-noBg" v-if="route.meta.loopType && store.styleInfo.logo">
          <img :src="urls + store.styleInfo.logo" alt="" v-if="store.styleInfo.logo" />
          <!-- <span v-else>请上传LOGO图片</span> -->
        </div>
      </div>
      <div
        class="audio-box"
        v-if="getId() == 615265577537605"
        :class="{ 'audio-rotate': store.style11Audio?.src == 'https://static.jiyi.show/free/style11/style11Audio.mp3' }"
        @click="audioPlay()"
      ></div>
      <div class="uoload-box" v-if="!route.meta.loopType" style="width: 108px; height: 40px">
        <t-loading size="small" :loading="swiperShow">
          <t-upload
            style="width: 108px; height: 40px"
            :loading="loading"
            ref="uploadRef2"
            :max="1"
            :before-upload="beforeUploadSwiper"
            theme="custom"
            accept=".png,.jpg,.jpeg,.webp"
            :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
            @fail="handleFail"
          >
            <div class="upload-content" style="width: 108px; height: 40px">
              <i class="doorIcon" style="font-size: 24px">&#xe657;</i>
              <span style="font-size: 16px; line-height: 24px">
                {{
                  store.styleInfo && store.styleInfo.banners.length > 0 && store.styleInfo.banners[0].url
                    ? '更换海报'
                    : '上传海报'
                }}
              </span>
            </div>
          </t-upload>
        </t-loading>
      </div>
      <div class="airbg" v-if="commonStore.templateId == 643443922464837">
        <div class="air" v-for="item in 8" :key="item"></div>
      </div>
      <div
        v-if="store.styleInfo.banners.length > 0 && store.styleInfo.banners[0].url && getId() !== 615265577537605"
        class="img-box"
        :style="{ backgroundImage: `url(${urls + store.styleInfo.banners[0].url})` }"
      ></div>
      <div class="img-box" v-if="getId() == 615265577537605">
        <img
          class="poster"
          :style="{ opacity: videoReady ? 0 : 1 }"
          src="https://static.jiyi.show/free/style11/banner.png"
          alt=""
        />
        <video
          ref="Style11VideoRef"
          src="https://static.jiyi.show/free/style11/style11home.mp4"
          :loop="true"
          :autoplay="true"
          preload="auto"
          playsinline
          :muted="true"
          @loadeddata="handleVideoLoaded"
          @paly="handleVideoLoaded"
          :style="{ opacity: videoReady ? 1 : 0 }"
        ></video>
      </div>
      <div
        class="nullImg"
        v-if="store.styleInfo.banners.length <= 0 || !store.styleInfo.banners"
        :style="{
          background: NullBg.bg,
          color: NullBg.color,
        }"
      >
        {{ !route.meta.loopType ? '请上传首页海报' : '' }}
      </div>
      <!-- v-else-if="commonStore.templateId !== 581876609753157" -->
      <!-- <img
      v-if="store.styleInfo.banners.length > 0 && store.styleInfo.banners[0].url"
      :src="urls + store.styleInfo.banners[0].url"
      alt=""
    /> -->
      <!-- <img v-else src="https://static-1316349889.cos.ap-shanghai.myqcloud.com/door/Dingtalk_20240327170336.jpg" alt="" /> -->
    </div>
    <div class="btm-scrroll" :style="{ color: NullBg.btmColor }">
      <div class="mouse" :style="{ border: `${NullBg.btmColor} 1px solid` }">
        <div :style="{ background: NullBg.btmColor }" class="round"></div>
      </div>
      <span class="arrow doorIcon">&#xe670;</span>
      <p v-if="!store.isMobileType">滑动鼠标进入展览</p>
      <p v-else>滑动屏幕进入展览</p>
    </div>
    <a :href="store.isMobileType ? doorUrl + 'wap/home' : doorUrl" class="btm-box" v-if="route.meta.loopType">
      <i class="iconfonts" :class="'color' + commonStore.templateId">&#xe6dd;</i>
      <span :class="'color' + commonStore.templateId">永不落幕的展览与展示平台</span>
    </a>
    <div class="btm-box" v-else>
      <i class="iconfonts" :class="'color' + commonStore.templateId">&#xe6dd;</i>
      <span :class="'color' + commonStore.templateId">永不落幕的展览与展示平台</span>
    </div>
  </div>
</template> 
  
<script setup lang="ts">
import homeVideo from '@/freeComponents/homeVideo/index.vue';
import { ImgUrlCancat, doorUrl } from '@/utils/minxin';
import { publicUrls } from '@/utils/minxin';
import COS from 'cos-js-sdk-v5';
import { getCloud } from '@/api/upLoad/index';
import { updateProject } from '@/api/project/project';
import { heards, url, urls } from '@/utils/request/upload';
import { ref, nextTick, computed, onMounted } from 'vue';
import { commonDataStore, useProjectStore } from '@/store';
import { upLoadFn } from '@/utils/request/upload';
import { useRoute } from 'vue-router';
import { MessagePlugin } from 'tdesign-vue-next';
// import { bg } from 'element-plus/es/locale';

const templateId = ref(0);
const route = useRoute();
const store = useProjectStore();
const commonStore = commonDataStore();
const uploadAllFilesInOneRequest = ref(false);
const loading = ref(false);
const logoshow = ref(false); //logo上传状态判断
const swiperShow = ref(false); //海报上传状态
const webNumber = ref(false);
const startX = ref(0);
const endX = ref(0);
const audioRef = ref(null);
const videoRef = ref(null);
const Style11VideoRef = ref(null);
const isPlay = ref(false);
const videoReady = ref(false);

const isMobile = navigator.userAgent.match(
  /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
);
// const getMaxWidth = computed(() => {
//   const isMobile = navigator.userAgent.match(
//     /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
//   );
//   if (
//     (window.orientation == null || window.orientation === 180 || window.orientation === 0) &&
//     window.innerWidth < window.innerHeight &&
//     isMobile
//   ) {
//     return '100vh';
//   } else {
//     return '100vw';
//   }
// });
const beforeUpload = (file: any) => {
  //回调钩子
  console.log(file.size);

  if (file.type.indexOf('image/') == -1) {
    MessagePlugin.error('文件类型错误');
    return;
  }
  if (
    file.type !== 'image/gif' &&
    file.type !== 'image/png' &&
    file.type !== 'image/jpeg' &&
    file.type !== 'image/jpg' &&
    file.type !== 'image/bmp'
  ) {
    MessagePlugin.error('上传文件格式错误');
    return;
  }
  if (file.size > 500 * 1024) {
    MessagePlugin.error('上传大小超出500k限制');
    return;
  }
  logoshow.value = true;
  upLoadFn(file, 5).then((res: any) => {
    // console.log(res);
    if (res) {
      store.setLogo(res);
      // formData.coverUrl = res;
      updateProject({ logoUrl: res }, localStorage.getItem('projectId')).then((res) => {
        // console.log(res, 'res-----');
      });
    } else {
      MessagePlugin.error('创建成功');
    }
    logoshow.value = false;
  });
};

const handleFail = (e: any) => {};
const pageWheel = (event: any) => {
  console.log('触发weel');
  const delta = Math.sign(event.wheelDelta || -event.detail);
  const scrollRef = document.getElementById('edit-scroll-box');
  // console.log(delta);
  if (delta > 0) {
    if (scrollRef.scrollLeft === 0) {
    } else {
      scrollRef.scrollLeft = scrollRef.scrollLeft - 100;
    }
  } else {
    scrollRef.scrollLeft = scrollRef.scrollLeft + 100;
  }
  if (!isMobile) {
    event.preventDefault();
  }
  if (Style11VideoRef.value && getId() == 615265577537605) {
    Style11VideoRef.value.play();
  }
};
const getId = () => {
  const url = window.location.href;
  const regex = /\/(\d+)/; // 匹配数字参数的正则表达式
  const match = url.match(regex); // 使用正则表达式匹配数字参数

  if (match) {
    const numericParam = parseInt(match[1]); // 提取数字参数并将其转换为数字类型
    // alert(numericParam);
    // console.log(numericParam); // 输出数字参数的值
    localStorage.setItem('projectId', String(numericParam));
    templateId.value = numericParam;
    return numericParam;
  } else {
    // window.location.href = doorUrl;
  }
};
getId();
const startDrag = (event) => {
  event.preventDefault();
};
const endDrag = (event) => {
  store.bannerShow = true;
  setTimeout(() => {
    store.bannerLock = true;
  }, 900);
  event.preventDefault();
};
const onTouchStart = (e) => {
  startX.value = e.touches[0].clientX;
  event.preventDefault();
};
const onTouchMove = (e) => {
  endX.value = e.touches[0].clientX;
};

const onTouchEnd = (e) => {
  if (endX.value < startX.value) {
    // 左滑
    store.bannerShow = true;
    store.bannerLock = true;
  } else if (endX.value > startX.value) {
  }
  event.preventDefault();
  // 重置初始值
  startX.value = 0;
  endX.value = 0;
};
const beforeUploadSwiper = (file: any) => {
  //回调钩子
  if (file.type.indexOf('image/') == -1) {
    MessagePlugin.error('文件类型错误');
    return;
  }
  if (file.size / 1048576 > 2) {
    MessagePlugin.error('上传大小超出2M限制');
    return;
  }
  if (webNumber.value) {
    return;
  }
  webNumber.value = true;
  swiperShow.value = true;
  swiperLoad(file);
};
const swiperLoad = (file: any) => {
  let name = file.name.split('.');
  let fomart = name[1];

  getCloud(fomart, 5).then((res: any) => {
    // console.log(res.data);

    webNumber.value = false;
    const cos = new COS({
      getAuthorization: function (options, callback) {
        callback({
          TmpSecretId: res.data.tmpSecretId,
          TmpSecretKey: res.data.tmpSecretKey,
          XCosSecurityToken: res.data.token,
          StartTime: res.data.startTime,
          ExpiredTime: res.data.expiredTime,
        });
      },
    });
    cos.putObject(
      {
        Bucket: res.data.bucket /* 存储桶 */,
        Region: res.data.region /* 存储桶所在地域，必须字段 */,
        Key: res.data.fileName /* 文件名 */,
        StorageClass: 'STANDARD', // 上传模式, 标准模式
        Body: file.raw, // 上传文件对象
      },
      (err, data) => {
        // console.log(err || data);
        if (data.statusCode === 200) {
          swiperShow.value = false;
          MessagePlugin.success('上传成功');
          nextTick(() => {
            store.setBanner([{ url: res.data.fileName }]);
          });
          updateProject({ coverUrl: res.data.fileName }, localStorage.getItem('projectId')).then((res) => {});
        }
      },
    );
  });
};

const orientationScroll = (width: number, height: number) => {
  // 判断当前屏幕是否横屏
  if (window.orientation == null || window.orientation === 180 || window.orientation === 0) {
    // 竖屏状态则旋转容器，并让高等于宽，宽等于高
    // && width < height

    setTimeout(() => {
      let element: any = document.getElementById('home-poster-id');
      element.style.width = `${height}px`;
      element.style.height = `${width}px`;
    }, 400);
  } else if (window.orientation === 90 || window.orientation === -90) {
    setTimeout(() => {
      let element: any = document.getElementById('home-poster-id');
      element.style.width = `${width}px`;
      element.style.height = `${height}px`;
    }, 400);
  }
};

if (isMobile) {
  orientationScroll(window.innerWidth, window.innerHeight);
  window.addEventListener('resize', orientationScroll);
}

const audioPlay = () => {
  if (store.style11Audio instanceof Audio && getId() == 615265577537605) {
    if (store.style11Audio.src === `https://static.jiyi.show/free/style11/style11Audio.mp3`) {
      store.style11Audio.pause();
      store.style11Audio = null;
      return;
    }
    store.style11Audio.pause();
    store.style11Audio = new Audio(`https://static.jiyi.show/free/style11/style11Audio.mp3`);
    store.style11Audio.play();
    isPlay.value = true;
  } else if (getId() == 615265577537605) {
    store.style11Audio = new Audio(`https://static.jiyi.show/free/style11/style11Audio.mp3`);
    store.style11Audio.play();
  }
};

const videoPlay = () => {
  if (Style11VideoRef.value) {
    Style11VideoRef.value.play();
  }
  nextTick(() => {
    if (getId() == 615265577537605) {
      store.style11Audio = new Audio(`https://static.jiyi.show/free/style11/style11Audio.mp3`);
      store.style11Audio.autoplay = true;
    }
  });
};

const handleVideoLoaded = () => {
  setTimeout(() => {
    videoReady.value = true;
  }, 500);
};

onMounted(() => {
  if (getId() == 615265577537605) {
    nextTick(() => {
      setTimeout(() => {
        store.style11Audio = new Audio(`https://static.jiyi.show/free/style11/style11Audio.mp3`);
        store.style11Audio.autoplay = true;
      }, 1800);
    });
    nextTick(() => {
      setTimeout(() => {
        if (Style11VideoRef.value) {
          Style11VideoRef.value.play();
        }
      }, 2500);
    });
  }
});

// 无首页图时的占位图及其他样式切换
const NullBg = computed(() => {
  let nullStyle = { bg: '', color: '', btmColor: '' };
  switch (commonStore.templateId) {
    case 546821049266245:
      nullStyle.bg = '#d4cab7';
      nullStyle.color = '#9e9281';
      nullStyle.btmColor = '#FEF3DF';
      break;
    case 568727972499525:
      nullStyle.bg = `url(${publicUrls + 'free/style2/nullbg.png'})`;
      nullStyle.color = '#99B9B6';
      nullStyle.btmColor = '#fff';
      break;
    case 581876609753157:
      nullStyle.bg = `url(${publicUrls + 'free/style3/nullbg.png'})`;
      nullStyle.color = 'transparent';
      nullStyle.btmColor = '#fff';
      break;
    case 584041224159301:
      nullStyle.bg = `url(${publicUrls + 'free/style4/nullbg.png'})`;
      nullStyle.color = '#5391A3';
      nullStyle.btmColor = '#fff';
      break;
    case 594187892883525:
      nullStyle.bg = `url(${publicUrls + 'free/style5/nullbg.png'})`;
      nullStyle.color = '#618484';
      nullStyle.btmColor = '#fff';
      break;
    case 598779929522245:
      nullStyle.bg = `url(${publicUrls + 'free/style6/nullbg.png'})`;
      nullStyle.color = '#fff';
      nullStyle.btmColor = '#fff';
      break;
    case 607270742659141:
      nullStyle.bg = `url(${publicUrls + 'free/style7/nullbg.png'})`;
      nullStyle.color = 'rgba(255, 248, 230, 1)';
      nullStyle.btmColor = 'rgba(255, 248, 230, 1)';
      break;
    case 609108365123653:
      nullStyle.bg = `url(${publicUrls + 'free/style8/nullbg.png'})`;
      nullStyle.color = 'rgba(79, 110, 92, 1)';
      nullStyle.btmColor = '#fff';
      break;
    case 621494527193157:
      nullStyle.bg = `rgba(57, 56, 54, .2)`;
      nullStyle.color = 'rgba(57, 56, 54, 1)';
      nullStyle.btmColor = '#fff';
      break;
    case 621784378253381:
      nullStyle.bg = `url(${publicUrls + 'free/style11/nullbg.png'})`;
      nullStyle.color = 'rgba(255, 255, 255, 1)';
      nullStyle.btmColor = '#FFECC3';
      break;
    case 628149200830533:
      nullStyle.bg = `linear-gradient(180deg, #F36057 0%, #DF413E 100%)`;
      nullStyle.color = 'rgba(180, 42, 41, 1)';
      nullStyle.btmColor = '#FED681';
      break;
    case 643443922464837:
      nullStyle.bg = `url(${publicUrls + 'free/style13/nullbg.png'})`;
      nullStyle.color = 'rgba(51, 51, 51, 0.4)';
      nullStyle.btmColor = 'rgba(51, 51, 51, 1)';
      break;
    case 651173498134597:
      nullStyle.bg = `url(${publicUrls + 'free/style15/nullbg.png'})`;
      nullStyle.color = 'rgba(51, 51, 51, 0)';
      nullStyle.btmColor = '#fff';
      break;
    case 661088851107909:
      nullStyle.bg = `url(${publicUrls + 'free/style16/nullBg.png'})`;
      nullStyle.color = '#663E30';
      nullStyle.btmColor = '#333';
      break;
    case 688032033431621:
      nullStyle.bg = `url(${publicUrls + 'free/style17/nullBg.png'})`;
      nullStyle.color = '#FED681';
      nullStyle.btmColor = '#FED681';
      break;
    default:
      nullStyle.bg = '#d4cab7';
      nullStyle.color = '#9e9281';
      nullStyle.btmColor = '#FEF3DF';
      break;
  }
  return nullStyle;
});
</script>

<style scoped lang="less">
.home-parennt {
  position: relative;
  // position: fixed;
  // top: 0;
  // left: 0;
  width: 100vw;
  height: 100%;
  transition: all 1s;
  // transform: translateX(0%);
  // background: #f0f0f0;
  // z-index: 9999;
}
// .bannerShow {
// transform: translateX(-100%);
// }
.home {
  position: relative;
  width: 100%;
  height: 100%;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.airbg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  overflow: hidden;
  .air {
    width: 100%;
    height: 100%;
    background: url(https://static.jiyi.show/free/style13/air.png?imageView2/format/webp) center/100% auto;
    background-position: bottom;
    background-repeat: repeat-x;
    flex-shrink: 0;
    animation: air1 16s linear infinite;
    margin-left: -300px;
    &:first-child {
      margin-left: 0;
    }
    &:nth-child(2n) {
      margin-left: -370px;
    }
  }
  @keyframes air1 {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
}
.img-box {
  width: 100%;
  height: 100%;
  background-size: cover;

  /* 使背景图片在盒子中居中展示 */
  background-position: center;

  /* 防止图片重复 */
  background-repeat: no-repeat;
  transform: translateZ(1px);
  position: relative;
  .poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s;
    object-fit: cover;
  }
  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: inline;
    transition: all 0.3s;
  }
}
.nullImg {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 14px;
  line-height: 48px;
  // background: #d4cab7;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.uoload-box {
  position: absolute;
  top: 20px;
  left: calc(50% - 54px);
  width: 108px;
  height: 40px;
  background: #ffffff;
  z-index: 666;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.1), 0px 8px 10px 1px rgba(0, 0, 0, 0.06),
    0px 3px 14px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  :deep(.t-upload) {
    width: 108px;
    height: 40px;
  }
}
.upload-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 40px;
  .doorIcon {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.59);
    margin-right: 4px;
  }
  span {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.59);
    line-height: 24px;
  }
}
.logo-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 20px;
  left: 84px;
  width: 256px;
  height: 64px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid transparent;
  border-radius: 2px;
  z-index: 666;
  transform: translateZ(2px);
  :deep(.t-upload) {
    width: 254px;
    height: 62px;
  }

  .upload-item-img {
    width: 254px;
    height: 62px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 254px;
      height: 62px;
      object-fit: contain;
    }
    span {
      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      line-height: 28px;
    }
  }
}
.logo-box:hover {
  border: 1px solid #e62b17;
}
.log-box-loop:hover {
  border: 1px solid transparent;
}
.log-box-loop {
  background: transparent !important;
  .upload-item-img {
    background: transparent;
  }
}
.btm-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 48px;
  background: rgba(0, 0, 0, 0.3);
  z-index: 666;
  .iconfonts {
    font-size: 26px;
    margin-right: 19px;
    color: rgba(255, 255, 255, 1);
  }
  span {
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    color: rgba(255, 255, 255, 1);
  }
}
.btm-scrroll {
  position: absolute;
  bottom: 60px;
  right: 80px;
  min-width: 209px;
  height: 34px;
  z-index: 666;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .mouse {
    width: 18px;
    height: 26px;
    border-radius: 9px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-right: 4px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
    .round {
      width: 2px;
      height: 6px;
      border-radius: 1px;
      animation: round 2s ease-out infinite;
      @keyframes round {
        0% {
          transform: translateY(5px);
        }
        50% {
          transform: translateY(12px);
        }
        100% {
          transform: translateY(5px);
        }
      }
    }
  }
  .doorIcon {
    display: block;
    width: 18px;
    // height: 18px;
    font-size: 18px;
    transform: rotate(90deg);
    margin-right: 10px;
  }
  ::v-deep p {
    flex-shrink: 0;
    font-family: SourceHanSerifCN-Bold;
    font-size: 20px;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    line-height: 34px;
  }
}
.audio-box {
  position: absolute;
  top: 80px;
  right: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  z-index: 666;
  background: url(https://static.jiyi.show/free/style11/playIcon.png?imageView2/format/webp) no-repeat center/100% 100%;
}
.audio-rotate {
  animation: audio-rotate 3s linear infinite;
  @keyframes audio-rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
.color628149200830533 {
  color: #fed681 !important;
}
.color688032033431621 {
  background: linear-gradient(270deg, #e7a859 0%, #ffdaac 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 60px;
}
</style>